<script lang="js" setup name="MainToolbar">
import { ref, computed, onMounted, reactive } from "vue";
import ToolbarButton from "@/components/ToolbarButton.vue";
import tbButtons from "../actions/tbButtons.js";
import { useAppStore } from "../stores/appStore.js";

const appStore = useAppStore();
const emit = defineEmits(["action"]);
const btnRefs = reactive({});
const getBtnRef = (el, name) => {
    if (el) {
        btnRefs[name] = el;
    }
};

const tb3dButtons = computed(() => {
    return tbButtons.filter(btn => btn.owner.includes("3d"));
});

const onAction = (action, evt) => {
    // console.log("onAction:", action, evt);

    switch (action.id) {
        case "load-folder":
            emit("action", { name: "openFolder" });
            break;
        case "load-pacs":
            emit("action", { name: "openPacs" });
            break;
        case "layoutmpr":
        case "layoutmprvr":
            emit ("action", { name: action.id });
            break;
        case "wwwl-default":
        case "wwwl-ct-bone":
        case "wwwl-ct-lung":
        case "wwwl-ct-abdomen":
        case "wwwl-ct-angio":
        case "wwwl-ct-brain":
        case "wwwl-ct-chest":
            emit("action", { name: "setWindow", wl: action.data.windowCenter, ww: action.data.windowWidth });
            break;
        case "Probe":
        case "MyProbe":
        case "Length":
        case "Angle":
        case "RectangleROI":
        case "EllipticalROI":
        case "PlanarFreehandROI":
        case "CardiothoracicRatio":
        case "CobbAngle":
        case "Label":
        case "Label-L":
        case "Label-R":
        case "Eraser":
            if (action.pressed) {
                if (evt) {
                    emit("action", { name: "setMeasureType", value: action.pressed ? action.id : "" });
                } else {
                    emit("action", { name: "setMeasureType", value: action.id });
                }
            } else {
                emit("action", { name: "setMeasureType", value: "" });
            }

            break;
        case "pseudo1":
        case "pseudo2":
        case "pseudo3":
        case "pseudo4":
        case "pseudo5":
        case "pseudo6":
        case "ClearPseudoColor":
            emit("action", { name: "colorMap", value: action.data });
            break;
        case "MIP":
        case "MinIP":
        case "AvgIP":
            emit("action", { name: "changeblendMode", value: action.id });
            break;
        case "CT-Bone":
        case "CT-Cardiac3":
        case "CT-AAA":
        case "CT-Muscle":
        case "CT-Lung":
        case "CT-Coronary-Arteries-2":
            emit("action", { name: "volumeColor", value: action.id });
            break;
        case "syncZoom":
            emit("action", { name: "syncZoom" });
            break;
        case "syncWindow":
            emit ("action", { name: "syncWindow" });
            break;
        case "reset":
            emit ("action", { name: "reset" });
            break;
    }
};

onMounted(() => {

});
</script>

<template>
	<div class="toolbar">
		<ToolbarButton
			v-for="btn in tb3dButtons"
			:key="btn.id"
			:btnInfo="btn"
			:ref="el => getBtnRef(el, btn.name)"
			@action="onAction"
		/>
	</div>
</template>

<style lang="scss" scoped>
.toolbar {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	padding: 2px;
	white-space: nowrap;
	overflow-y: hidden;
	overflow-x: auto;
	border-bottom: 1px solid grey;
}

/* 移动端响应式设计 */
@media (max-width: 768px) {
	.toolbar {
		padding: 1px;
		min-height: 44px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none; /* Firefox */
		-ms-overflow-style: none; /* IE and Edge */
	}

	.toolbar::-webkit-scrollbar {
		display: none; /* Chrome, Safari, Opera */
	}
}

/* 超小屏幕手机 (320px - 480px) */
@media (max-width: 480px) {
	.toolbar {
		min-height: 40px;
		padding: 0.5px;
	}
}

/* 平板设备适配 (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
	.toolbar {
		min-height: 48px;
		padding: 1.5px;
	}
}

/* 大屏幕平板/小桌面 (1025px - 1366px) */
@media (min-width: 1025px) and (max-width: 1366px) {
	.toolbar {
		min-height: 52px;
		padding: 2px;
	}
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
	.toolbar {
		touch-action: pan-x;
		scroll-behavior: smooth;
	}
}

/* 横屏模式优化 */
@media (orientation: landscape) and (max-width: 768px) {
	.toolbar {
		min-height: 42px;
		padding: 1px;
	}
}
</style>
